::-webkit-scrollbar {
  display: none;
}

.el-button:focus {
  outline: none;
}

.isShowPc {
  display: none !important; // 默认隐藏

  @media (min-width: 1024px) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.pc {
  padding: 10px;
  height: 100%;

  box-sizing: border-box;

  .cursor {
    cursor: pointer;
  }

  .mainFlex {
    display: flex;
    height: 100%;

    .mainFlex-left {
      width: 100%;
      height: 100%;
      overflow-y: auto;

      @media (max-width: 1024px) {
        // 可在小屏中增加特殊样式
      }
    }

    .mainFlex-right {
      height: 100%;

      background-color: #fff;

      border-radius: 10px;
      margin-left: 16px;
      overflow-y: auto;
      width: 50%;
      min-width: 350px;
    }
  }

  .main {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
  }
  .layout-card-body-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}

.mobile {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  // padding: 5px;
  .mainFlex {
    display: flex;
    flex-direction: column;
    height: calc(100%);

    .mainFlex-left {
      width: 100%;
    }

    .mainFlex-right {
      width: 100%;
      max-height: 300px;
      overflow-y: auto;
    }
  }
  .layout-card-body-flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
  }
}

.fy-popup {
  width: 100%;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  .popup-content {
    padding: 10px;
    background: #f4f4f4;
    border-radius: 8px;
    flex: 1 1 23%;

    @media (max-width: 1560px) {
      flex: 1 1 48%;
    }

    @media (max-width: 1280px) {
      flex: 1 1 30%;
    }

    @media (max-width: 1080px) {
      flex: 1 1 45%;
    }

    @media (max-width: 768px) {
      flex: 1 1 100%;
    }
  }
}

// 统一的layout-card样式
.layout-card {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 16px;
  box-sizing: border-box;
  overflow: hidden;

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 10px;
    margin-top: 21px;
    padding-right: 16px;
    .title {
      font-size: 16px;
      padding-left: 25px;
      border-left: 2px solid #3e62a9;
    }

    .btn {
      display: flex;
      align-items: center;

      font-size: 12px;
      width: 80px;
      margin-right: 20px;
    }
  }

  &-item {
    cursor: pointer;
    .title {
      font-size: 14px;
    }
  }

  // 网格布局基础样式
  &-body-grid {
    display: grid;
    gap: 10px;
    padding: 10px 20px;
    width: 100%;
    min-height: 100px;
    scrollbar-width: none;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    &.grid-3 {
      @media (min-width: 1520px) {
        grid-template-columns: repeat(3, 1fr);
      }
      @media (max-width: 1519px) {
        grid-template-columns: repeat(2, 1fr);
      }
      @media (max-width: 1024px) {
        grid-template-columns: repeat(1, 1fr);
      }
    }

    &.grid-4 {
      @media (min-width: 1520px) {
        grid-template-columns: repeat(4, 1fr);
      }
      @media (max-width: 1519px) {
        grid-template-columns: repeat(3, 1fr);
      }
      @media (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    &.grid-2 {
      @media (min-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }

    &.scroll {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  &-body-flex {
    display: flex;

    align-items: center;

    @media (max-width: 1024px) {
      flex-direction: column;
    }
  }

  &-form {
    :deep(.el-form-item) {
      box-sizing: border-box;
      margin-right: 20px;

      @media (max-width: 1024px) {
        width: 100%;
      }
    }
  }
}

.mobile-only {
  @media (min-width: $breakpoint-sm-min) {
    display: none;
  }
}

.desktop-only {
  @media (max-width: $breakpoint-xs-max) {
    display: none;
  }
}
